<template>
    <div>
        <div id="main" style="width: 100%; height: 400px;"></div>
    </div>
</template>

<script setup>
import {defineProps, onMounted} from 'vue';
import * as echarts from 'echarts';
// 接收父组件传递的 chartData 数据
const props = defineProps({
    chartData: {
        type: Object,
        required: true
    }
});
onMounted(async () => {
    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);

    const option = {
        backgroundColor: '#0f375f',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['平均分', '最高分', '最低分', '不及格人数'],
            textStyle: {
                color: '#ccc'
            }
        },
        xAxis: {
            data: props.chartData.category,
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        yAxis: {
            splitLine: {show: false},
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        series: [
            {
                name: '平均分',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 15,
                data: props.chartData.averageData
            },
            {
                name: '最高分',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: 'rgba(20,200,212,0.5)'},
                        {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                        {offset: 1, color: 'rgba(20,200,212,0)'}
                    ])
                },
                z: -12,
                data: props.chartData.maxData
            },
            {
                name: '最低分',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    borderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#14c8d4'},
                        {offset: 1, color: '#43eec6'}
                    ])
                },
                data: props.chartData.minData
            },
            {
                name: '不及格人数',
                type: 'line', // 将类型改为 'line'
                smooth: true, // 开启平滑曲线
                showAllSymbol: true,
                symbol: 'emptyCircle',
                lineStyle: {
                    color: 'red' // 将线条颜色改为红色
                },
                symbolSize: 15,
                data: props.chartData.failData
            }
        ]
    };
    option && myChart.setOption(option);
});

// window.addEventListener('resize', function () {
//     myChart.resize();
// });
// window.addEventListener('unload', function () {
//     myChart.dispose();
// });
</script>

<style scoped>
/* 这里可以添加样式 */
</style>
